<template>
  <div>
   <MyHeader/>
   <div class="list">
    <MyGoods
     v-for=" item in list"
    :key="item.id"
    :goodsObj="item"/>
   </div>
   <MyFooter
   :isAllTrue="isAllChecked"
   @allCheck="allChecked"
   :totalCount="totalCountNum"
   :totalAllPrice="totalprice"
   />
  </div>
</template>

<script>
import MyHeader from './components/MyHeader'
import MyFooter from './components/MyFooter'
import MyGoods from './components/MyGoods'
export default {
 data () {
  return {
   list:[]
  }
 },
  components: {
   MyHeader,
   MyFooter,
   MyGoods
  },
   async created() {
     let resq = await this.$http({
      method:'GET',
      url:'/api/cart '
     })
     this.list = resq.data.list
     // console.log( this.list );
  },
  computed:{
   isAllChecked() {
    return this.list.every(item => item.goods_state)
   },
   // 计算总数
   totalCountNum() {
    return this.list.reduce((item,obj) => {
     if(obj.goods_state){
      item += obj.goods_count
     }
     return item
    },0)
   },
   // 计算总价
   totalprice() {
    return this.list.reduce((item, obj) => {
        if (obj.goods_state) {
          item += obj.goods_price * obj.goods_count;
        }
        return item;
      }, 0);
   }
  },
  methods: {
   allChecked(checked) {
    this.list.forEach(item => item.goods_state = checked)
   }
  }
}
</script>

<style>
.list {
 padding: 45px 0 50px;
}
</style>